<template>
  <div id="home">
    <div class="ranking">
      <div class="ranking_shop">
        <h4>本月店铺销售TOP5排行</h4>
        <div class="shop_content">
          <el-table
            :data="storeRanking"
            height="32vh"
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
            style="width: 100%"
          >
            <el-table-column prop="shopName" label="店铺名称">
            </el-table-column>
            <el-table-column prop="saleCount" label="销售额（元）">
              <template slot-scope="scope">
                <span style="margin-left: 10px">
                  {{ scope.row.saleCount / 100 }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="ranking_commodity">
        <h4>本月商品销量TOP10排行</h4>
        <div class="commodity_content">
          <el-table
            :data="goodsSaleCount"
            height="64vh"
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
            style="width: 100%"
          >
            <el-table-column prop="goodsName" label="商品名称">
            </el-table-column>
            <el-table-column prop="saleCount" label="销售数量（件）">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- <div class="ranking_refund">
        <h4>本月退款商品排行</h4>
        <div class="refund_content">
          <el-table
            :data="tableData"
            height="32vh" 
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
            style="width: 100%; font-size: 13px"
          >
            <el-table-column prop="shop" label="店铺名称"></el-table-column>
            <el-table-column prop="name" label="商品名称"> </el-table-column>
            <el-table-column prop="num" label="退款次数"> </el-table-column>
          </el-table>
        </div>
      </div> -->
    </div>
    <div class="statistics">
      <div class="statistics_home">
        <div class="month">
          <h4>
            <span>本月交易额</span><span>{{ gmv.orderCount }}笔</span>
          </h4>
          <p>¥{{ gmv.price / 100 }}</p>
        </div>
        <div class="month">
          <h4>
            <span>今日交易额</span><span>{{ gmvToday.orderCount }}笔</span>
          </h4>
          <p>¥{{ gmvToday.price / 100 }}</p>
        </div>
      </div>
      <div id="map"></div>
      <div id="sales"></div>
    </div>
    <div class="active">
      <div class="unitprice">
        <h2>客单价</h2>
        <div class="unitprice_box">
          <div style="border-right: 1px solid #003cff">
            <h3>¥{{ arpa / 100 }}</h3>
            <p>今天</p>
          </div>
          <div>
            <h3>¥{{ sevendaysArpa / 100 }}</h3>
            <p>近7天</p>
          </div>
          <div style="border-left: 1px solid #003cff">
            <h3>¥{{ thirtydaysArpa / 100 }}</h3>
            <p>近30天</p>
          </div>
        </div>
      </div>
      <div class="active_shop">
        <h4>活跃用户排行榜TOP5</h4>
        <div class="shop_content">
          <el-table
            :data="activeUser"
            height="32vh"
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
            style="width: 100%"
          >
            <el-table-column prop="nickname" label="用户昵称">
            </el-table-column>
            <el-table-column prop="scanCount" label="7天活跃次数">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="active_room">
        <h4>活跃房间排行榜TOP5</h4>
        <div class="shop_content">
          <el-table
            :data="activeRoomNumber"
            height="32vh"
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
            style="width: 100%"
          >
            <el-table-column prop="qrcodeId" label="二维码串号">
            </el-table-column>
            <el-table-column prop="scanCount" label="7天活跃次数">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import * as echarts from "echarts";
import $ from "jquery";
// let baseUrl = "http://192.168.0.220:8091";
let baseUrl = "http://122.51.69.142:8091"; //服务器地址

// var imgUrl = "~@/public/img/code/dibiao.png";
var echarts2 = require("echarts/lib/echarts");
require("echarts/lib/chart/map");
require("echarts/map/js/china");
export default {
  name: "wel",
  data() {
    return {
      storeRanking: [],
      goodsSaleCount: [],
      gmv: {
        orderCount: 0,
        price: 0,
      },
      gmvToday: {
        orderCount: 0,
        price: 0,
      },
      activeUser: [],
      activeRoomNumber: [],
      arpa: 0,
      sevendaysArpa: 0,
      thirtydaysArpa: 0,
      item: [],
      saleroom: [],
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {},
  mounted() {
    this.mapChart();
    this.getDataList();
  },
  methods: {
    // 进入页面加载
    getDataList() {
      let _this = this;
      _this.$ajax
        .post(`${baseUrl}/pc/indexData`)
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            _this.goodsSaleCount = resData.data.goodsSaleCount10;
            _this.storeRanking = resData.data.storeRanking5;
            _this.gmv = resData.data.gmv;
            _this.gmvToday = resData.data.gmvToday;
            _this.activeUser = resData.data.activeUser7.slice(0, 6);
            _this.activeRoomNumber = resData.data.activeRoomNumber10.slice(
              0,
              6
            );
            _this.arpa = resData.data.arpa;
            _this.sevendaysArpa = resData.data.sevendaysArpa;
            _this.thirtydaysArpa = resData.data.thirtydaysArpa;
            _this.item = resData.data.saleroom10.map(function (item) {
              return item["date"];
            });
            _this.saleroom = resData.data.saleroom10.map(function (item) {
              return item["saleroom"];
            });
            _this.salesvolume(_this.item, _this.saleroom);
          } else {
            _this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
    },
    // 地图
    mapChart() {
      let myChart = echarts2.init(document.getElementById("map"));
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      var markPointData = [];
      this.$ajax
        .post(`${baseUrl}/pc/indexData`)
        .then(function (res) {
          //请求成功
          let resData = res.data;
          if (resData.code == 200) {
            resData.data.storeMaps.forEach((item) => {
              markPointData.push({
                name: item.name,
                coord: [item.longitude, item.latitude],
                symbol: "image://https://ycyf.zhilianyc.com/photos/abc.png", // 标注图片地址路径
                symbolSize: 20,
                service: item.location + item.detailedAddress,
              });
            });
            showCitys("520100", "贵阳市");
          } else {
            this.$message.error(resData.msg);
          }
        })
        .catch(function (error) {
          //请求失败
          console.log(error);
        });
      function initEcharts(map) {
        myChart.setOption(
          {
            tooltip: {
              //提示框组件。
              trigger: "item", //触发类型 散点图
              enterable: true, //鼠标是否可进入提示框
              transitionDuration: 1, //提示框移动动画过渡时间
              triggerOn: "click",
              formatter: function (params) {
                if (params.name) {
                  var str =
                    '<p class="conut-next">' +
                    params.name +
                    '</p><p class="conut-next">' +
                    params.data.service +
                    "</p>";
                  return str;
                }
              },
              backgroundColor: "rgba(30, 54, 124,1)",
              borderWidth: "1px",
              borderRadius: "5",
              borderColor: "rgba(30, 159, 255,0.5)",
              textStyle: {
                color: "rgba(255,255,255,1)",
              },
              padding: 22,
            },
            roam: true,
            geo: {
              type: "map",
              map: map,
              itemStyle: {
                areaColor: "#0157AC",
                borderColor: "#000",
              },
              scaleLimit: {
                min: 2,
                max: 3000,
              },
              label: {
                show: true,
                color: "#fff",
              },
              emphasis: {
                itemStyle: {
                  areaColor: "#3955AF",
                  borderColor: "#000",
                },
                label: {
                  show: true,
                  color: "#fff",
                },
              },
            },
            series: [
              {
                name: "节点分布",
                type: "map",
                geoIndex: 0,
                markPoint: {
                  label: {
                    normal: {
                      show: true,
                    },
                    emphasis: {
                      show: true,
                    },
                  },
                  itemStyle: {
                    normal: {
                      color: "rgba(72,150,128,0.3)",
                    },
                  },
                  data: markPointData,
                },
              },
            ],
          },
          true
        );
      }
      var that = this;
      //展示对应市
      function showCitys(cName,param) {
        $.getJSON(`map/city/${cName}.json`, (data) => {
            that.$echarts.registerMap(param, data);
            initEcharts(param);
          }
        );
      }
    },
    // 折线图
    salesvolume(time, data) {
      var myChart = echarts.init(document.getElementById("sales"));
      myChart.setOption({
        title: {
          text: "十日内销售额",
          textStyle: {
            fontWeight: 500,
            color: "#4BE6FF",
          },
          left: "center",
          top: "3%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#4BE6FF",
              },
            },
            data: time,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: true,
              textStyle: {
                color: "#4BE6FF",
              },
            },
          },
        ],
        series: [
          {
            name: "销售总额",
            type: "line",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#6686C0" },
                { offset: 0.25, color: "#87AAEA" },
                { offset: 0.5, color: "#7CA1E7" },
                { offset: 0.75, color: "#6A91DA" },
                { offset: 1, color: "#6686C0" },
              ]),
            },
            smooth: 0.2,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#1F6168" },
                { offset: 0.25, color: "#1F6168" },
                { offset: 0.75, color: "#574449" },
                { offset: 1, color: "#6B393D" },
              ]),
            },
            data: data,
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
#home {
  padding: 1vw;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  background-color: #014693;
  .ranking {
    width: 20vw;
    height: auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    ::-webkit-scrollbar {
      width: 4px;
      height: 6px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: rgba(144, 147, 153, 0.5);
      background-clip: padding-box;
      min-height: 28px;
      border-radius: 2em;
    }
    .ranking_shop {
      border-radius: 20px;
      width: 20vw;
      height: 36vh;
      text-align: center;
      margin-bottom: 3vh;
      background-color: #0157ac;
      padding-top: 10px;
      h4 {
        font-weight: 500;
        height: 3vh;
        line-height: 3vh;
        margin-bottom: 1vh;
        color: #4be6ff;
      }
      .shop_content {
        width: 20vw;
        height: 32vh;
      }
    }
    .ranking_commodity {
      width: 20vw;
      height: 64vh;
      text-align: center;
      margin-bottom: 3vh;
      border-radius: 20px;
      padding-top: 10px;
      background-color: #0157ac;
      h4 {
        font-weight: 500;
        height: 3vh;
        line-height: 3vh;
        margin-bottom: 1vh;
        color: #4be6ff;
      }
      .commodity_content {
        width: 20vw;
        height: 64vh;
      }
    }
    .ranking_refund {
      width: 20vw;
      height: 36vh;
      text-align: center;
      h4 {
        font-weight: 500;
        height: 3vh;
        line-height: 3vh;
        margin-bottom: 1vh;
      }
      .refund_content {
        width: 20vw;
        height: 32vh;
        border: 1px solid black;
      }
    }
  }
  .statistics {
    width: 35vw;
    height: auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    .statistics_home {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      background-color: #0157ac;
      border-radius: 20px 20px 0 0;
      .month:nth-child(1) {
        border-right: 1px solid #003cff;
      }
      .month {
        width: 17vw;
        height: 10vh;
        color: #685252;
        h4 {
          font-weight: 500;
          padding: 1vh;
          height: 3vh;
          line-height: 3vh;
          font-size: 12px;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          color: white;
        }
        p {
          text-align: center;
          font-size: 25px;
          font-weight: bolder;
          color: #88cbff;
        }
      }
    }
    #map {
      width: 35vw;
      height: 60vh;
    }
    #sales {
      width: 35vw;
      height: 32vh;
      text-align: center;
      background-color: #0157ac;
      border-radius: 20px;
    }
  }
  .active {
    width: 20vw;
    height: auto;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    ::-webkit-scrollbar {
      width: 4px;
      height: 6px;
    }
    ::-webkit-scrollbar-thumb {
      background-color: rgba(144, 147, 153, 0.5);
      background-clip: padding-box;
      min-height: 28px;
      border-radius: 2em;
    }
    .unitprice {
      background-color: #0157ac;
      border-radius: 20px 20px 0 0;
      h2 {
        font-size: 25px;
        font-weight: 500;
        height: 6vh;
        line-height: 6vh;
        color: #4be6ff;
      }
      .unitprice_box {
        width: 20vw;
        height: 10vh;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        div {
          width: 6vw;
          height: 8vh;
          display: flex;
          flex-flow: column nowrap;
          justify-content: space-between;
          align-items: center;
          h3 {
            font-size: 19px;
            font-weight: 500;
            color: #88cbee;
          }
          p {
            color: white;
          }
        }
      }
    }
    .active_shop {
      width: 20vw;
      height: 36vh;
      border-radius: 20px;
      background-color: #0157ac;
      padding-top: 10px;
      h4 {
        font-weight: 500;
        height: 3vh;
        line-height: 3vh;
        margin-bottom: 1vh;
        color: #4be6ff;
      }
    }
    .active_room {
      width: 20vw;
      height: 36vh;
      border-radius: 20px;
      background-color: #0157ac;
      padding-top: 10px;
      h4 {
        font-weight: 500;
        height: 3vh;
        line-height: 3vh;
        margin-bottom: 1vh;
        color: #4be6ff;
      }
    }
  }
}
/*设置table的背景色*/
#home .el-table,
#home .el-table__expanded-cell {
  background-color: transparent !important;
}
#home .el-table th,
#home .el-table tr,
#home .el-table td {
  color: #88cbff;
  background-color: transparent !important;
}

/* 去掉中间数据的分割线 */
#home .el-table__row > td {
  border: none;
  color: white;
}
/* 去掉上面的线 */
#home .el-table th.is-leaf {
  border: none;
}
/* 去掉最下面的那一条线 */
#home .el-table::before {
  height: 0px;
}
</style>
